<template>
  
  <div class="content">
    <div class="header">
      <img src="./assets/logo.png" alt="" >
    </div>
     <p class="title">vue音乐网</p>
    <div class="rouli">
      <router-link to="/find">发现音乐</router-link>
     <router-link to="/my">MY音乐</router-link>
     <router-link to="/parent">音乐人</router-link>
    </div>
   
  </div>

  <!--所有路由得出口  是用来展示你得内容-->
  <router-view></router-view>
</template>
<script setup>

</script>
<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
.content{
   width: 100%;
  height: 50px;
  background-color: black;
}
.rouli{
  padding-top: 10px;
}
.rouli a{
  margin-left: 20px;
  text-decoration: none;
  margin-top: 20px;
  color: aliceblue;
}
.header{
  float: left;
}
.header img{
  width: 30px;
   height: 30px;
   margin-top: 5px;
}
.title{
  color: aliceblue;
  font-weight: 700;
  margin-top: 10px;
  float: left;
}
</style>
